<template>
  <div class="recommend">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <img :src="item.pic" />
      </van-swipe-item>
    </van-swipe>
    <!-- 推荐列表 -->
    <div class="list">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="30"
        >
          <h2>热门歌单推荐</h2>
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <div class="left">
                <img :src="item.imgurl" />
              </div>
              <div class="rigth">
                <p>{{ item.creator.name }}</p>
                <p>{{ item.dissname }}</p>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { getBanner, getRecommendList } from "./service";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      refreshLoading: false,
      banners: [],
      list: [],
      page: 0,
    };
  },
  methods: {
    onLoad() {
      this.page++;
      console.log("上拉加载啦");
      this.getRecommendData();
    },
    onRefresh() {
      console.log("下拉刷新");
      this.refreshRecommendData();
    },
    async getBannerData() {
      const { code, result } = (await getBanner()) || {};
      if (code) return false;
      this.banners = result?.sliders || [];
    },
    async getRecommendData() {
      const { code, data } = (await getRecommendList(this.page)) || {};
      // 将上拉加载的状态变成false
      this.loading = false;
      if (code) return false;
      // 上拉加载增加数据
      this.list = [...this.list, ...(data?.list || [])];
      // 超过80条数就没有数据了
      if (this.list.length >= 80) {
        this.finished = true;
      }
    },
    async refreshRecommendData() {
      const { code, data } = (await getRecommendList(1)) || {};
      // 将页码数重置
      this.page = 1;
      // 停止下拉刷新
      this.refreshLoading = false;
      // 重置上拉加载的完成状态
      this.finished = false;
      if (code) return false;
      // 下拉刷新数据直接复制
      this.list = data?.list || [];
    },
  },
  created() {
    this.getBannerData();
    // this.getRecommendData();
  },

  /*
  getData(page,pageSize)
  1. 下拉刷新 
     覆盖数据
     getData(1,10)
     下拉更新用户数据 重置
  2. 上拉加载
     用户在上拉的过程中 请求下一页的数据
     当前的数据条数和总数据条数对比，到达最后一条没出触发
     页面如果不足一屏 自动触发oload方法 
        不需要再created里请求列表数据
  3. 移动端的分页 
     添加数据
     getData(page,pageSize)
     getData(1,10)
     getData(2,10)
     getData(3,10)
  */
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.recommend {
  position: fixed;
  .top(88);
  left: 0;
  right: 0;
  bottom: 0;
  background: pink;
  color: #fff;
  display: flex;
  flex-direction: column;
  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    .h(150);
    .l_h(150);
    text-align: center;
    background-color: #39a9ed;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // list
  .list {
    flex: 1;
    height: 200px;
    overflow-y: scroll;
    ul {
      li {
        .w(375);
        .h(82.5);
        .padding(0,20,20,20);
        box-sizing: border-box;
        display: flex;
        .left {
          .w(60);
          .h(60);
          .margin(0,20,0,0);
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
